<template>
  <view class="street-view-container" :style="{'flex-direction':currentStreet.arrow.type === 'left' ? 'row' : 'column'}"> 
     <image v-if="currentStreet.arrow.type === 'left'" class="arrow-left-img" :style="{left:currentStreet.arrow.left+'rpx',top:currentStreet.arrow.top+'rpx'}" src="/static/detail/street/arrow_left.png" mode="aspectFit"></image> 
     <image v-if="currentStreet.arrow.type === 'up'" class="arrow-up-img" :style="{left:currentStreet.arrow.left+'rpx',top:currentStreet.arrow.top+'rpx'}" src="/static/detail/street/arrow_up.png" mode="aspectFit"></image> 
  <view class="street-view-box" >
    <image class="bg-img" src="/static/detail/street/tip_bg.png" mode="aspectFit"></image>
    <view class="street-content">
      <text class="street-desc" >{{ currentStreet.desc || '' }}</text>
      
      <view class="street-tags" v-if="currentStreet.tags && currentStreet.tags.length > 0">
        <view class="tag-item" v-for="(tag, index) in currentStreet.tags" :key="index">
          <image class="tag-icon" :src="tag.img" mode="aspectFit"></image>
          <text class="tag-text">{{ tag.name }}</text>
        </view>
      </view>
    </view>
      <view class="street-action1" @tap="handleViewDetail">
        <text class="action-text">查看详情</text>
        <image class="action-icon" src="/static/detail/you.png" mode="aspectFit"></image>
      </view>
      <view class="street-area">
        <text>{{ currentStreet.area }}</text>
        <text>m²</text>
      </view>
      <view class="street-rooms">
        {{ currentStreet.rooms }}
        <text>栋</text>
      </view>
  </view>
  </view>
</template>

<script>
import { streetDatas } from './data'

export default {
  name: 'StreetView',
  props: {
    name: {
      type: String,
      default: '',
    },
  },
  computed: {
    currentStreet() {
      // 根据props.name从streetDatas中获取对应街道的数据
      return streetDatas[this.name] || {}
    }
  },
  methods: {
    // 可以添加点击事件处理函数
    handleViewDetail() {
      uni.navigateTo({
					url: '/pages/home/home?name=' + this.name
				})
    },
  },
  data() {
    return {
    }
  },
}
</script>

<style scoped lang="scss">
.street-view-container{
  position: absolute;
  z-index:-1;
  display: flex;
}
.street-view-box {
  border-radius: 12px;
  padding: 20rpx;
  overflow: hidden;
  width: 566rpx;
  height: 558rpx;
  position: relative;
}
.bg-img {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

.street-header::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 160rpx;
  height: 32rpx;
  border-radius: 16rpx;
}

.street-content {
  position: absolute;
  top: 100rpx;
  left: 50rpx;
  bottom: 150rpx;
  right: 50rpx;
  display: flex;
  flex-direction: column;
}

.street-desc {
  flex: 1;
  font-size: 24rpx;
  color: #333333;
  line-height: 40rpx;
  margin-bottom: 24rpx;
  overflow-y: auto;
}

.street-tags {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 30rpx;
}

.tag-item {
  display: flex;
  align-items: center;
  background: linear-gradient(271deg, rgba(172, 230, 255, 0.27) 5%, rgba(255, 255, 255, 0.9) 99%);
  border-radius: 20rpx;
  padding: 10rpx 16rpx;
  margin-right: 16rpx;
  margin-bottom: 16rpx;
}

.tag-icon {
  width: 24rpx;
  height: 24rpx;
  margin-right: 8rpx;
}

.tag-text {
  font-size: 22rpx;
  color: #1890ff;
}


.street-action {
  position: absolute;
  bottom: 45rpx;
  left: 45rpx;
  display: flex;
  align-items: center;
  color: #1890ff;
  font-size: 24rpx;
  margin-top: 10rpx;
}

.street-action1 {
  position: absolute;
  top: 35rpx;
  right: 45rpx;
  display: flex;
  align-items: center;
  color: #1890ff;
  font-size: 24rpx;
  margin-top: 10rpx;
}
.action-text {
  margin-right: 8rpx;
   pointer-events: auto;
}

.action-icon {
  width: 20rpx;
  height: 20rpx;
  margin-top:4rpx;
}

// 装饰性元素
.street-view-box::before {
  content: '';
  position: absolute;
  bottom: 0;
  right: 0;
  width: 240rpx;
  height: 20rpx;
  background: linear-gradient(90deg, rgba(129, 182, 255, 0) 0%, rgba(129, 182, 255, 0.2) 100%);
}

.street-area{
  position: absolute;
  bottom: 130rpx;
  left: 130rpx;
  width: 150rpx;
  text-align: center;
  font-size: 24rpx;
  color: #FA3320;
}

.street-rooms{
  position: absolute;
  bottom: 130rpx;
  right: 70rpx;
  font-size: 24rpx;
  color: #000000;
  width: 150rpx;
  text-align: center;
}

.arrow-up-img {
  position: absolute;
  width: 56rpx;
  height: 29rpx;
}

.arrow-left-img {
  position: absolute;
  width: 29rpx;
  height: 56rpx;
}
</style>
